<template>
  <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      highlight-current-row
  >
    <el-table-column
        type="selection"
        width="55"
        fixed="left"
        v-if="isMultiSelect"
        :selectable="selectable"
    />
    <el-table-column
        v-for="(header,index) in headers"
        :prop="header.prop"
        :label="header.label"
        :width="header.width"
        :show-overflow-tooltip="header.showOverflowTooltip"
        :fixed="header.fixed"
        :key="index"
    >
      <template #default="{row}">
        <component v-if="header.render" :is="header.render(row)"></component>
        <div v-else-if="header.formatter">{{ header.formatter(row) }}</div>
        <div v-else>{{ row[header.prop] }}</div>
      </template>

    </el-table-column>
    <!-- 操作列 begin -->
    <el-table-column fixed="right" v-if="isHasOperateColumn" label="操作" :width="operateColumnWidth || 200"
                     :min-width="150">
      <template #default="scope">
        <slot name="operateSlot" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <!--操作列 end -->

    <template #empty>
      <div>无数据</div>
    </template>
  </el-table>
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script lang="ts" setup>
import {ref} from 'vue'

// let $slots = useSlots();

interface ListType {
  tableData: any[]
  headers: any[]
  isMultiSelect?: boolean
  isHasOperateColumn?: boolean,
  total?: number
  operateColumnWidth?: number
}

const {headers, tableData, isMultiSelect, isHasOperateColumn, total, operateColumnWidth = 200} =
    defineProps<ListType>()

const $emit = defineEmits(['getSize', 'getPage', 'handleSelectionChange'])

const currentPage = ref<number>(1)
const pageSize = ref<number>(10)

const selectable = (row: any) => {
  return row.name !== '6'
}
const handleSizeChange = (size: number) => {
  $emit('getSize', size)
}
const handleCurrentChange = (page: number) => {
  $emit('getPage', page)
}

const handleSelectionChange = (selection: any) => {
  $emit('handleSelectionChange', selection)
}

// 建立VNode节点与slot的绑定关系
// const handleVNodeSlot = (slotName, VNode) => {
//   console.log(slotName);
//   console.log(VNode);
// }
// console.log(headers);
</script>
<style scoped lang="scss">
.el-table {
  max-height: calc(100% - 89px);
  // height: 100%;
  overflow-y: auto;


  :deep(th.el-table__cell) {
    height: 60px;
  }

  :deep(td.el-table__cell) {
    height: 58px;

    .el-tooltip {
      div {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  :deep(.el-popper) {
    width: 600px;
    font-size: 15px;
  }

}

.el-pagination {
  justify-content: flex-end;
  margin-top: 10px;
  height: 35px;
  position: absolute;
  right: 30px;
  bottom: 15px;
}

</style>
<style>

</style>
